<template>
  <view class="box">
    <view
      :style="{
        color: 'rgb(173, 173, 173)',
        'text-align': 'center',
        padding: '0 30rpx',
        'margin-bottom': '40rpx',
      }"
      >{{ anTitle }}</view
    >
    <view
      class="box_content"
      @click="goPage(item)"
      v-for="(item, index) in xiaoyaoList.data"
      :key="index"
    >
      <view class="title">
        <!-- 头像 -->
        <image
          :src="item.user.avatar_url"
          @click.stop="goHome(item.user.user_id)"
        ></image>
        <!-- 名称，发布时间 -->
        <view class="right">
          <view class="name">{{ item.user.nick_name }}</view>
          <view class="gangg">{{ item.user.create_time }}</view>
        </view>
      </view>

      <view class="all_detail" >
        <!-- 单视频 -->
        <view class="single_video" @click.stop="goVideo(item.file[0].url)">
          <!-- <image
          :src="item.file[0]"
          mode="widthFix"
          
        ></image> -->
          <image
            :src="item.file[0].url_img"
            mode="widthFix"
            class="single_video_img"
          ></image>
          <!-- 遮罩层 -->
          <view class="jiugong_img_mask">
            <view class="video_cover_play">
              <image src="@/static/images/icon_dtym_bofang.png"></image>
            </view>
          </view>
        </view>
        <!-- 内容 -->
        <view class="box_details">
          {{ item.content }}
        </view>

        <view
          class="card_content_box_preview"
          v-if="my_level_id < item.grade_auth"
          @click.stop="goMember"
        >
          该内容仅支持{{
            item.grade_auth == 1
              ? "元气驿站"
              : item.grade_auth == 2
              ? "启初梦谷"
              : item.grade_auth == 3
              ? "青空天台"
              : item.grade_auth == 4
              ? "无极云顶"
              : item.grade_auth == 5
              ? "返朴归源"
              : ""
          }}及以上行者查看
        </view>
      </view>

      <!-- 预览样式 -->
      <!-- <view class="Preview_style" v-else @click.stop="goMember">
        该内容仅支持{{
          item.grade_auth == 1
            ? "元气驿站"
            : item.grade_auth == 2
            ? "启初梦谷"
            : item.grade_auth == 3
            ? "青空天台"
            : item.grade_auth == 4
            ? "无极云顶"
            : item.grade_auth == 5
            ? "返朴归源"
            : ""
        }}及以上行者查看
      </view> -->

      <!-- 底部按钮 -->
      <view class="box_bottom">
        <view class="box_bottom_item">
          <image src="@/static/images/slices/icon_zhunfa.png" mode=""></image>
          <text>转发</text>
        </view>
        <view class="box_bottom_item">
          <image src="@/static/images/icon_sy_xiaoxi.png" mode=""></image>
          <text>评论</text>
        </view>
        <view class="box_bottom_item">
          <image src="@/static/images/icon_sslgt_dianzan.png" mode=""></image>
          <text>赞</text>
        </view>
      </view>
    </view>

    <view
      class="empty_view"
      v-if="xiaoyaoList.data && xiaoyaoList.data.length == 0"
    >
      <image
        class="item_left_clickable"
        src="../static/images/my/kong.png"
        mode=""
      ></image>
      <view v-if="from == 'history'">您还没有历史记录~</view>
      <view v-else>当前没有相关数据，请查看其他分类或功能。</view>
    </view>
  </view>
</template>
  
  <script>
import storage from "@/common/storage"; // 缓存封装
export default {
  components: {},
  props: {
    xiaoyaoList: {
      type: Object,
      default: {},
    },
    from: {
      type: String,
      default: "",
    },
    my_level_id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      anTitle: "",
    };
  },
  mounted() {
    this.anTitle = storage.get("shanAn").xioayaoyou;
  },
  methods: {
    // 跳会员页面
    goMember() {
      uni.navigateTo({
        url: `/pages/member/index`,
      });
    },
    goPage(item) {
      uni.navigateTo({
        // url: "/pages/detail/flyDetail",
        url: `/pages/detail/flyDetail?detailType=youji&currentId=${item.id}&from=wei`,
      });
    },
    goVideo(url) {
      uni.navigateTo({
        url: `/components/preview?type=false&vimg=${url}`,
      });
    },
    // 进个人主页
    goHome(user_id) {
      uni.navigateTo({
        url: `/pages/home/home?user_id=${user_id}`,
      });
    },
  },
};
</script>
  
  <style scoped lang="scss">
.box {
  padding-top: 40rpx;
  padding-bottom: 40rpx;
}
.box_content {
  width: 100%;
  background: rgba(39, 39, 39, 0.5);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin-bottom: 16rpx;
  padding: 30rpx;
  box-sizing: border-box;

  .title {
    display: flex;
    align-items: center;

    image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }

    .right {
      //   margin-top: 8rpx;
      margin-left: 24rpx;

      .name {
        font-size: 32rpx;
        line-height: 42rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #eeeeee;
      }

      .gangg {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #adadad;
        margin-top: 10rpx;
      }
    }
  }

  .all_detail {
    position: relative;
  }
  .Preview_style {
    width: 100%;
    height: 300rpx;
    border-radius: 16rpx;
    background: rgba(105, 113, 151, 0.7);
    margin-top: 24rpx;
    text-align: center;
    line-height: 300rpx;
    color: white;
  }
  .box_details {
    margin-top: 24rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    color: #eeeeee;
  }
  .card_content_box_preview {
    color: #eeeeee;
    padding-top: 30rpx;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    background: linear-gradient(
      360deg,
      rgba(48, 53, 77, 1) 70%,
      rgba(49, 57, 79, 0) 100%
    );
    text-align: center;
    width: 100%;
    height: 100%;
  }
  .box_bottom {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .box_bottom_item {
      display: flex;
      align-items: center;
      margin-top: 33rpx;
      position: relative;
      top: 3rpx;
      image {
        width: 30rpx;
        height: 30rpx;
      }
      text {
        color: #eeeeee;
        font-size: 28rpx;
        margin-left: 15rpx;
      }
    }
  }

  .single_video {
    margin-top: 32rpx;
    width: 100%;
    height: 345rpx;
    border-radius: 8rpx;
    overflow: hidden;
    position: relative;
    .single_video_img {
      width: 100%;
    }
    // video {
    //   width: 100%;
    // }
    .jiugong_img_mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(1, 1, 1, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      .video_cover_play {
        width: 80rpx;
        height: 80rpx;
        image {
          width: 80rpx;
          height: 80rpx;
        }
      }
    }
  }
}
.empty_view {
  margin-top: 300rpx;
  image {
    margin: 0 auto;
    width: 410rpx;
    height: 410rpx;
  }
  view {
    font-size: 30rpx;
    color: #d8d8d8;
    text-align: center;
  }
}
</style>